<template>
  <div class="all">
    <el-card class="box-card">
      <div slot="header" class="clearfix">用户登录</div>
      <el-form name="elform" ref="form" :model="login" label-width="80px">
        <el-form-item label="账号">
          <el-input
            placeholder="请输入电话或邮箱"
            v-model="login.tel"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            placeholder="请输入密码"
            v-model="login.pwd"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item prop="verify" label="验证码">
          <el-input
            name="verify"
            style="width: 48%"
            type="text"
            v-model="login.card"
            placeholder="请输入验证码"
            prefix-icon="el-icon-picture"
          ></el-input
          >&nbsp;&nbsp;
          <!--这里的src路径得看后端对应的Controller路径-->
          <img
            id="code"
            height="30px"
            width="150px"
            @click="refresh()"
          />
        </el-form-item>

        <div class="choice">
          <el-checkbox v-model="checked" @click="acc">记住账号</el-checkbox>
          <el-checkbox v-model="checked2" @click="pwd">记住密码</el-checkbox>
        </div>
        <div name="loginName">
          <el-button type="primary" @click="tologin" style="margin-"
            >登录</el-button
          >
          <el-button @click="apply">注册</el-button>
        </div>
      </el-form>
    </el-card>
    Copyright © 2022 智慧灯杆
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {},
      uuid: {},
      checked: false,
      checked2: false,
      rules: {
        verify: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      cardyzm: "",
    };
  },
  mounted() {
    // let config = {
    //   responseType: "blob"
    // };
    // this.$axios.get("userlogin/getCode",config).then(resp => {
    //     let imgSrc = URL.createObjectURL(resp.data);   
    //     document.getElementById("code").src = imgSrc;
    //     console.log(resp.headers.uuid);
    // });
    this.card();
  },
  methods: {
    tologin() {
      console.log(this.uuid.uuid);
      this.$axios
        .post("user/login", this.login)
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("登录成功");
            sessionStorage.setItem("menu", JSON.stringify(res.data.data.menu));
            sessionStorage.setItem("user", JSON.stringify(res.data.data.user));
            this.$router.push("/index");
          } else {
            this.$message.error("用户名,密码或验证码错误");
          }
        })
        .catch((error) => {
          this.$message.error("出错了,请稍后重试");
        });
    },
    apply() {
      this.$router.push("/apply");
    },
    /**
     * 记住账号 密码
     */
    acc() {
      this.checked = !this.checked;
    },
    pwd() {
      this.checked2 = !this.checked2;
    },
    card(){
          let config = {
      responseType: "blob"
    };
    this.$axios.get("userlogin/getCode",config).then(resp => {
        let imgSrc = URL.createObjectURL(resp.data);   
        document.getElementById("code").src = imgSrc;
        console.log(resp.headers.uuid);
        this.login.uuid = resp.headers.uuid;
    });
    },
    // 刷新验证码
    refresh() {
      
      //注意 这里的src对应的后端Controller路径
      //document.getElementById("code").src =
      //  "http://localhost:9000/userlogin/getCode?time=" + new Date().getTime();

      this.card();
    },
  },
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 100px auto;
  width: 480px;
  margin-top: 150px;
}
#loginName {
  margin-left: 150px;
  margin-left: 10px;
}
body {
  background-image: url(../assets/login.png);
}
.choice {
  margin-bottom: 15px;
  font-family: "10px", "微软雅黑", "PingFang SC";
}
</style>